<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生主页</title>
    <link rel="stylesheet" href="./css/students.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <script src="./js/jquery-3.6.0.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
    <div id="container">
        <!-- 主容器 -->
        <div id="box-header">
            <!-- 顶部 -->
            <div class="header-left">
                <img src="./images/fec1eed6ded8f65768ea18f85073b46.png">
                <h2>宿舍管理系统</h2>
            </div>
            <div class="header-right">
                <img src="./images/student.jpg" >
                <div class="header-name">
                    <!-- <span>王培</span>  -->
                    <span>▼</span>
                </div>
                
            </div>
            <div class="signOut">
                <p>退出系统</p>
            </div>
        </div>
        <!-- 主页面 -->
        <div class="box-body">
            <div class="body-left">
                <div class="notice active">
                    <img src="./images/公告.png" alt="">
                    <h3>公告主页</h3>
                </div>
                <div class="notice">
                    <img src="./images/学生.png" alt="">
                    <h3>学生管理</h3>
                </div>
            </div>
            <div class="body-right">
                <div class="body-top">
                    <div class="body-container">
                        <div class="body-content on">
                            <p>公告管理</p>
                            <a>X</a>
                        </div>
                    </div>
                </div>
                <div class="body-form">
                    <div class="form-title">
                        <h3 style="font-weight: bold;">欢迎进入</h3>
                    </div>
                    <div class="form-table">

                        <table class="table table-hover table-striped">
                            <tr>
                                <th><h4>公告</h4></th>
                                
                            </tr>
                        <tbody class="abandoned tbody1">
                            <!-- <tr>
                                <td>
                                    <h5>公告1</h5>
                                    <p style="float: left;">内容.....</p>
                                    <span style="float: right;">2021-12-12</span>

                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h5>公告2</h5>
                                    <p style="float: left;">内容.....</p>
                                    <span style="float: right;">2021-12-12</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h5>公告3</h5>
                                    <p style="float: left;">内容.....</p>
                                    <span style="float: right;">2021-12-12</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <h5>公告4</h5>
                                    <p style="float: left;">内容.....</p>
                                    <span style="float: right;">2021-12-12</span>
                                </td>
                            </tr> -->
                        </tbody>
                          </table>
                    </div>
                    <div class="body-nav">

                        <nav aria-label="Page navigation">
                            <ul class="pagination pag1">
                              <li>
                                <a href="#" aria-label="Previous">
                                  <span aria-hidden="true">&laquo;</span>
                                </a>
                              </li>
                              <!-- <li><a href="#">1</a></li>
                              <li><a href="#">2</a></li>
                              <li><a href="#">3</a></li>
                              <li><a href="#">4</a></li>
                              <li><a href="#">5</a></li> -->
                              <li>
                                <a href="#" aria-label="Next">
                                  <span aria-hidden="true">&raquo;</span>
                                </a>
                              </li>
                            </ul>
                          </nav>
                    </div>
                </div>
                
                <!-- -------------------------- -->
                <div class="body-form" style="display: none;">
                    <div class="form-title">
                        <div>
                            <input type="text" name="" id="">
                        </div>
                        <button type="button" class="btn btn-info" disabled>搜索</button>
                        <button type="button" class="btn btn-info" disabled>重置</button>
                        <button type="button" class="btn btn-default " disabled>添加学生</button>
                    </div>
                    <div class="form-table">

                        <table class="table table-hover table-striped">
                            <tr>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>账号</th>
                                <th>学生所属宿舍</th>
                                <th>宿舍水电费余额（元）</th>
                                <th>宿舍状态</th>
                                <th>操作</th>
                                
                            </tr>
                        <tbody class="abandoned tbody2">
                            <!-- <tr>
                                <td>101</td>
                                <td>王二</td>
                                <td>账号</td>
                                <td>1002</td>
                                <td>5</td>
                                <td>正常</td>
                                <td>
                                    <a class="Payment">查看缴费记录</a>
                                    <a class="Recharge">充值</a>
                                </td>
                            </tr> -->
                        </tbody>
                          </table>
                    </div>
                    <div class="body-nav">

                        <nav aria-label="Page navigation">
                            <ul class="pagination pag2">
                              <li>
                                <a href="#" aria-label="Previous">
                                  <span aria-hidden="true">&laquo;</span>
                                </a>
                              </li>
                              <li class="active"><a href="#">1</a></li>
                             
                              <li>
                                <a href="#" aria-label="Next">
                                  <span aria-hidden="true">&raquo;</span>
                                </a>
                              </li>
                            </ul>
                          </nav>
                    </div>
                </div>
                <!-- ------------------------- -->
            </div>
        </div>

    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">缴费记录</h4>
            </div>
            <div class="modal-body">
                <table class="table table-hover table-striped">
                    <thead>

                        <tr>
                            <th>缴费金额</th>
                            <th>缴费时间</th>
                            
                            
                        </tr>
                    </thead>
                <tbody class="abandoned tbody3">
                    <tr>
                        <!-- <td>5元</td>
                        <td>2012</td> -->
                    </tr>
                </tbody>
                  </table>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal fade" id="myRecharge" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel" >充值</h4>
            </div>
            <div class="modal-body">
              <input type="text" placeholder="请输入充值金额！" id="money">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default rechargeBtn" data-dismiss="modal">充值</button>
            </div>
          </div>
        </div>
      </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/cookie.js"></script>
    <script src="./js/student.js"></script>
</body>
</html>